<script>
import { getMovies, getTenMovie, searchMovieRating, addComment } from './api/movies'
import { Search } from '@element-plus/icons-vue'
export default {
  data() {
    return {
      Search,
      name: '',
      data: [],
      rating: "",
      pageSize: 10,
      startRow: 1,
      currentPage: 1,
      TenMovieData: []
    }
  },
  created() {
    this.fetchData();
    setInterval(this.getTenMovieData, 5000);
    setInterval(this.addMovieRating, 5000);
  },
  methods: {
    async fetchData() {
      this.data = [];
      let data = {
        startRow: this.startRow,
        pageSize: this.pageSize,
      }
      await getMovies(JSON.stringify(data)).then((res) => {
        this.startRow = res.startRow;
        delete res.startRow;
        for (let i in res) {
          this.data.push(res[i]);
        }
        // console.log(this.data);
      });
    },
    handleSizeChange(val) {
      this.startRow = "1";
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.fetchData();
    },
    async searchMovieRating() {
      console.log(this.name);
      let data = {
        name: this.name
      }
      await searchMovieRating(JSON.stringify(data)).then((res) => {
        this.rating = res.rating.toFixed(2);
      });
    },
    async getTenMovieData() {
      this.TenMovieData = [];
      await getTenMovie().then((res) => {
        for (let i in res) {
          this.TenMovieData.push(res[i]);
        }
      });
      console.log(this.TenMovieData);
    },
    async addMovieRating() {
      let data = {
        userId: this.randomNum(1,100000),
        movieId: this.randomNum(1,21),
        rating: this.randomNum(1,5) - 0.5 * Math.round(Math.random())
      }
      await addComment(JSON.stringify(data));
    },
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    }
  }
}
</script>


<template>
  <div class="app-container">
    <div class="mt-4" style="margin-bottom: 30px;">
      <el-input v-model="name" style="max-width: 600px" placeholder="Please input movie name" class="input-with-select">
        <template #prepend>
          <el-button :icon="Search" @click="searchMovieRating" />
        </template>
      </el-input>
      {{ rating }}
    </div>
    <el-table :data="data" style="width: 100%">
      <el-table-column prop="title" label="Name" />
      <el-table-column prop="genres" label="Genres" />
    </el-table>
    <el-pagination v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]" :background="true" layout="sizes, next"
      :total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      <div style="margin: 50px auto; width: 200px; text-align: center">
        <em>热门电影</em>
      </div>
    <el-table :data="TenMovieData" style="width: 100%">
      <el-table-column prop="title" label="Name" />
      <el-table-column prop="rating" label="Rating" />
    </el-table>
  </div>
</template>


<style scoped>
.app-container {
  margin: 0 auto;
  width: 80%;
}

.title {
  cursor: pointer;
}

.title:hover {
  color: #192432;
  font-weight: bold;
}
</style>
